<template>
  <div class="content2">
    <div style="width: 100%">
      <div class="row">
        <div class="lCol">
          <van-image
            @click="showUserInfosFun()"
            round
            width="1rem"
            height="1rem"
            :src="
              forumList.account.img.anonymousFilePath
                ? getUrl(forumList.account.img.anonymousFilePath)
                : ''
            "
          />
        </div>
        <div class="rCol">
          <div>
            <span style="color: #000000;font-size:16px" v-if="forumList.anonymous!=true">{{ forumList.account.oaAccount }}</span>
            <span style="color: #000000;font-size:16px" v-if="forumList.anonymous==true">{{ forumList.account.nickname }}</span>
            <van-tag round color="#efefef" text-color="#c0c0c0" class="ml2">楼主</van-tag>
          </div>
          <div class="mt2 font13">
            <span>{{ forumList.createdTime }}</span>
            <span>发布</span>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="infoTitle font16" v-html="htmlDecode(forumList.content)">
        </div>
        <div v-if="forumList.fileList.length>0"  style="display:flex;align-items:center;
          flex-direction: row;flex-wrap:wrap;">
          <van-image
            v-for="(itemfiles,index) in forumList.fileList" :key='index' 
            width="90px"
            height="90px"
            style="margin:10px 10px 0px 0px"
            :src="itemfiles.anonymousFilePath? getUrl(itemfiles.anonymousFilePath): ''" 
            @click="showPopView22(index)"/>
        </div>
        <div class="iconRow">
          <div class="iconCol normalColor">
            <div><van-icon name="eye-o" size="0.5rem"/></div>
            <div>{{ forumList.displayOrder }}</div>
          </div>
          <div class="iconCol normalColor">
            <div><van-icon name="other-pay" size="0.5rem" @click="showChatPopView()" /></div>
            <div>{{ forumList.commentCount }}</div>
            <van-popup :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="showChatPop"  position="bottom" :style="{ padding:'10px' }" @closed='closedpop1()'> 
              <div style="display:flex">
                 <!-- <van-field  ref="showChatPopRef"  autosize rows="2" type="textarea" v-model="chatinfos" :placeholder="hintText" style="flex:1"
                   class="chatInput" :v-html="htmlDecode(commentItem.content)">
                 </van-field>   -->
                <div contenteditable class="divinputview" rows="1" type="textarea" id="chatinfosid" v-html="chatinfos" ref="showChatPopRef" placeholder="请输入评论"></div>
              <div style="display:flex;flex-direction:row;align-items:center;margin-left:10px">
                <!-- <div style="display:flex;justify-content:center">
                  <van-icon name="arrow-down" size="20px"  @click="showChatPop=false"/>
                </div> -->
                <!-- <div style="display:flex;justify-content:center"> -->
                  <van-icon name="smile-o" size="30px" color="#F06F3F" @click="showEmojiView('1')"/>
                <!-- </div> -->
              <!-- <van-checkbox v-model="anonymous" style="margin:5px">是否实名333</van-checkbox> -->
              <van-button type="primary" size="small" color="#F06F3F" style="margin:5px;" 
                @click="tosubmint(anonymous,chatinfos,forumList.id,commentTypeInfo1.id,'评论')">提交</van-button>
              </div>
              </div>
              <div v-if="showEmojiView1" class="flex_center_h" style="max-height:4rem;margin-top:10px;overflow:auto" >
                <div  v-for="(line, i) in emotionArr" :key="i" @click="handEmotion(line)" v-html="line.url" style="height:1rem;width:1rem"></div>
              </div>
            </van-popup>
          </div>
          <div
            class="iconCol"
            :class="forumList.isSupport ? 'colorOrange' : 'normalColor'"
          >
            <div @click="giveLike(forumList)">
              <van-icon name="good-job-o" size="0.5rem" />
            </div>
            <div>{{ forumList.supportVO.isSupport }}</div>
          </div>
          <div class="iconCol" :class="forumList.isOppose ? 'colorOrange' : 'normalColor'">
            <div @click="stepOn(forumList)">
              <van-icon
                name="good-job-o"
                size="0.5rem"
                style="transform: rotate(180deg)"
              />
            </div>
            <div>{{ forumList.supportVO.isOppose }}</div>
          </div>
        </div>
        <!-- <div style="display:flex;align-items:center;background-color:#F7F7F7;margin:10px 0px;border-radius:10px;padding:10px" @click="showChatPopView()">
          <span class="font14" style="color:#AAAAAA">写评论</span>
        </div> -->
        <!-- 评论模块 -->
        <div class="commentList">
          <div style="margin-bottom:10px"
            v-for="(commentItem, commentIndex) in commentList"
            :key="commentIndex"
          >
            <!-- 一级评论 -->
            <div class="commentRow" >
              <div style="width:1rem">
                <van-image
                  round width="0.8rem" height="0.8rem" :src="commentItem.img.anonymousFilePath? getUrl(commentItem.img.anonymousFilePath): ''"
                />
              </div>
              <div class="rCol2" style="flex:1">
                <div>
                  <span style="color: #000000;" class="font13">{{commentItem.nickname}}</span>
                </div>
                <div >
                  <span class="font12">{{forumList.createdTime}}</span>
                </div>
              </div>
            
              <div class="rIcon" :class="commentItem.isSupport ? 'colorOrange' : 'normalColor'">
                <div @click="giveCommentLike(commentItem)">
                  <van-icon
                    name="good-job-o"
                    size="0.4rem"
                  />
                </div>
                <div>{{ commentItem.supportVO.isSupport }}</div>
              </div>
            </div>
            <div class="lText" style="margin-left:1rem" @click="show1ChatPopView(commentIndex)">
              <!-- <span class="colorOrange">{{ commentItem.nickname }}：1</span> -->
              <span
                class="commentContent font14 huifu"
                v-html="htmlDecode(commentItem.content)"
              ></span>
            </div>
            <div class="normalColor" style="margin-left:1rem;margin-top: 10px;margin-bottom:10px;">
              <div style="display: flex;align-items: center;font-size: 11px;color: #aaaaaa;padding-left:28px"><van-icon name="other-pay" size="0.5rem" @click="show1ChatPopView(commentIndex)" style="margin-right:5px"/>回复</div>
            </div>  
            <!-- 二级评论 -->
            <div v-if="commentItem.children.length > 0" class="chatinfoview">
              <div 
                class="commentRow"
                v-for="(childItem, childIndex) in commentItem.children"
                :key="childIndex"
              >
                <div class="lText" @click="show2ChatPopView(commentIndex,childIndex)">
                  <span class="titleColor">{{ childItem.nickname }}</span>
                  <span v-if="childItem.typeName == '评论'">：</span>
                  <span v-if="childItem.typeName == '回复'">回复</span>
                  <span class="titleColor" v-if="childItem.typeName == '回复'"
                    >{{ childItem.fromTo }}：</span
                  >
                  <span
                    class="commentContent huifu"
                    v-html="htmlDecode(childItem.content)"
                  ></span>
                </div>
              
                <!-- <div class="rIcon" :class="childItem.isSupport ? 'colorOrange' : 'normalColor'">
                  <div @click="giveCommentLike(childItem)">
                    <van-icon
                      name="good-job-o"
                      size="0.4rem"
                    />
                  </div>
                  <div>{{ childItem.supportVO.isSupport }}</div>
                </div> -->
              </div>
              <!-- <div v-if="commentItem.children.length <4&&commentItem.commentCount>3" style="display:flex;align-items:center;justify-content:center" @click="showalllist(commentIndex)">
               <span class="font14" style="color:#60a9ec;background-color:#F7F7F7;border-radius:10px;padding:2px 10px">展开其他回复<van-icon name="arrow-down" size="14px"/></span>
                
              </div> -->
              <div v-if="commentItem.children.length <4&&commentItem.allCommentCount>3" style="display:flex;align-items:center;" @click="showalllist(commentIndex)">
               <span class="font14" style="color:#60a9ec;background-color:#F7F7F7;border-radius:10px;padding:2px 0px">展开其他{{(commentItem.allCommentCount-3)}}条回复<van-icon name="arrow-down" size="14px"/></span>
              </div>
            </div>
           
          </div>
        </div>
      </div>
    </div>
    <van-popup v-if="showUserData!=[]" v-model="showUserInfos" position="bottom" style="border-radius:15px 15px 0 0">
        <div class="flex_center_h_sa" style="margin-top:30px">
          <img :src="this.showUserData.img?getUrl(this.showUserData.img.anonymousFilePath):''" alt="" width="50px" height="50px" style="margin-right:80px;margin-left:20px">
          <van-button v-if="showUserData.isInterested!=true" class="font14" color="#F06F3F"  size="small" style="padding:0 17px;margin-left:15px" @click="toInterested(showUserData)">关注</van-button>
          <van-button v-if="showUserData.isInterested==true" class="font14" color="#F06F3F"  size="small" @click="interestdelete(showUserData)" style="padding:0 17px;margin-left:15px">取消关注</van-button>
          <!-- <van-button class="font14" color="#F06F3F" plain size="small" style="padding:0 17px;margin-left:15px">私信</van-button>
          <van-button class="font14" color="#F06F3F" plain size="small" style="padding:0 17px;margin-left:15px">禁言</van-button> -->
          <van-button v-if="(isHadmin||isModelHadmin)&&isForbidden==true" class="font14" color="#F06F3F" plain size="small" style="padding:0 17px;margin-left:15px">已禁言</van-button>
          <van-button @click="tobidden(showUserData.oaAccount)" v-else-if="isHadmin||isModelHadmin" class="font14" color="#F06F3F" plain size="small" style="padding:0 17px;margin-left:15px">禁言</van-button>
        </div>
        <div style="flex:1;display:flex;flex-direction:row;justify-content: space-around; width:90%;align-items: center;"> 
          <span class="font15 font_bold mr5" style="margin-left:20px">{{showUserData.nickname}}</span>
          <div class="centerlines"></div>   
          <span class="font13"><span class="font13 font_bold mr5">{{showUserData.noteCount}}</span>帖子</span>
          <div class="centerlines"></div>      
          <span class="font13"><span class="font13 font_bold mr5">{{showUserData.fromInterestCount}}</span>关注</span>  
          <div class="centerlines"></div>   
          <span class="font13"><span class="font13 font_bold mr5">{{showUserData.toInterestCount}}</span>粉丝</span>    
        </div>
        <div class="flex_center_h_sa box2" style="margin-top:36px" @click="toMyWord(showUserData)">
          <span class="font16" style="flex:1">他的帖子</span>
          <van-icon name="arrow" color="#9A9A9A" size="15px"/>
        </div>
        <div class="flex_center_h_sa box2" style="margin-top:10px" @click="toMyGuanzhu(showUserData)">
          <span class="font16" style="flex:1">他的关注</span>
          <van-icon name="arrow" color="#9A9A9A" size="15px"/>
        </div>
        <div class="flex_center_h_sa box2" style="margin-top:10px" @click="toMyFans(showUserData)">
          <span class="font16" style="flex:1">他的粉丝</span>
          <van-icon name="arrow" color="#9A9A9A" size="15px"/>
        </div>
    </van-popup>
    <van-popup  :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="show1ChatPop"  position="bottom" :style="{ padding:'10px' }" @closed='closedpop2()'> 
      <div style="display:flex">
        <div contenteditable class="divinputview" rows="3" type="textarea" id="chat1infosid" v-html="chat1infos" ref="showChat1PopRef" :placeholder="chat1hint"> </div>
      <div style="display:flex;flex-direction:row;align-items:center;margin-left:10px">
        <!-- <div style="display:flex;justify-content:center ">
          <van-icon name="arrow-down" size="20px"  @click="show1ChatPop=false"/>
        </div> -->
        <!-- <div style="display:flex;justify-content:center"> -->
          <van-icon name="smile-o" size="30px" color="#F06F3F" @click="showEmojiView('2')"/>
        <!-- </div> -->
        <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
          @click="tosubmint2(anonymous,chat1infos,commentTypeInfo2.id)">提交</van-button>
      </div>
      </div>
      <div v-if="showEmojiView2" class="flex_center_h" style="max-height:4rem;margin-top:10px;overflow:auto" >
        <div  v-for="(line, i) in emotionArr" :key="i" @click="handEmotion2(line)" v-html="line.url" style="height:1rem;width:1rem"></div>
      </div>
    </van-popup>
    <van-popup :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="show2ChatPop"  position="bottom" :style="{ padding:'10px' }" @closed='closedpop3()'> 
      <div style="display:flex">
        <div contenteditable class="divinputview" rows="3" type="textarea" id="chat2infosid" v-html="chat2infos" ref="showChat2PopRef" :placeholder="chat2hint"> </div>
      <div style="display:flex;flex-direction:row;align-items:center;margin-left:10px">
        <!-- <div style="display:flex;justify-content:center ">
          <van-icon name="arrow-down" size="20px"  @click="show2ChatPop=false"/>
        </div> -->
        <!-- <div style="display:flex;justify-content:center"> -->
          <van-icon name="smile-o" size="30px" color="#F06F3F" @click="showEmojiView('3')"/>
        <!-- </div> -->
        <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
        @click="tosubmint3(anonymous,chat2infos,commentTypeInfo2.id)">提交</van-button>
      </div>
      </div>
      <div v-if="showEmojiView3" class="flex_center_h" style="max-height:4rem;margin-top:10px;overflow:auto" >
        <div  v-for="(line, i) in emotionArr" :key="i" @click="handEmotion3(line)" v-html="line.url" style="height:1rem;width:1rem"></div>
      </div>
    </van-popup>
    <div style="display:flex;align-items:center;background-color:#F7F7F7;margin:10px 0.35rem;border-radius:10px;padding:10px;position:fixed;bottom:0;width:calc(100% - 0.7rem)" @click="showChatPopView()">
          <span class="font14" style="color:#AAAAAA">写评论</span>
    </div>
    <van-image-preview
      :show="showImagepreview"
      :images="imgList"
      :closeable="true"
      :loop = "false"
      :closeOnPopstate="true"
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { Notify,Toast } from "vant";
import {
  findById,
  findContentComment,
  queryByType,
  supportCreate,
  deleteSupport,
  displayOrderUpdate,
  create,
} from "@/api/colorfulLifeList.js";
import {findCurrentAccount} from "@/api/colorfulLife.js";
import {findComment2,interestdelete,interestcreate} from '@/api/gettodo'
import { openFileUrl } from '@/store/openFile'
import { Picker } from "emoji-mart-vue"; 
import MonitorKeyboard from "@/assets/js/keyboard.js"
import { ImagePreview } from 'vant';

export default {
  name: "newcolordetail",
  data() {
    return {
      forumList: {},
      commentList: [],
      itemId: "", //话题id
      commentTypeInfo1: {}, //评论类型信息(内容)
      commentTypeInfo2: {}, //评论类型信息(回复)
      supportTypeInfo1: {}, //点赞类型信息(内容)
      supportTypeInfo2: {}, //点赞类型信息(评论)
      showChatPop:false,
      hintText:'',
      chatinfos:'',
      anonymous:false,
      chat1infos:'',
      show1ChatPop:false,
      chat1hint:'',
      chat2infos:'',
      show2ChatPop:false,
      chat2hint:'',
      showUserData:{},
      userInfo:{},
      showUserInfos:false,
      commentIndexNumber1:'',
      childIndexNumber:'',
      commentIndexNumber2:'',
      emotionArr:[],
      emotionList: ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'],
      showEmojiView1:false,
      showEmojiView2:false,
      showEmojiView3:false,
      editInfos1:'',
      editInfos2:'',
      editInfos3:'',
      issubmitClose:false,
      showDialog:false,
      isHadmin: false, //是否为管理员
      isModelHadmin:false, //是否为栏目管理员
      isForbidden:false,
      showImagepreview:false,
      imgList:[],
    };
  },
  components:{
    Picker
  },
  // watch: {
  //   $route(to, from) {
  //     this.categoryId = to.query.categoryId;
  //     this.topicId = to.query.topicId;
  //     this.onLoad();
  //   },
  // },
  beforeDestroy(){
    this.monitorKeyboard.onEnd();
  },
  computed: {
    ...mapGetters(["user"]),
  },
  mounted(){
    this.getKeyboardState();
  },
  activated() {
    let searchKeyword = localStorage.getItem('getnewuserdata')
    if (searchKeyword=='getnewuserdata'){
      Notify({ type: "success", message: "用户禁言成功！" });
      localStorage.setItem('getnewuserdata', '')
    }
    this.showUserInfos=false
    this.itemId = this.$route.query.itemId;
    this.showDialog = this.$route.query.showDialog;
    this.initEmotion();
    this.getCurrentAccount();
    this.getAllForumList();
    this.getContentCommentList();
    this.getCommentTypeInfo();
    this.getSupportTypeInfo();
    if(this.showDialog==true){
      this.showChatPopView();
    }
  },
  methods: {
    getKeyboardState(){
      this.monitorKeyboard = new MonitorKeyboard();
      this.monitorKeyboard.onStart();
      // 监听虚拟键盘弹出事件
      this.monitorKeyboard.onShow(() => {  
        console.log('键盘弹出')
        this.showEmojiView1=false,
        this.showEmojiView2=false,
        this.showEmojiView3=false
      })
      //监听键盘收起的事件
      this.monitorKeyboard.onHidden(() => {
        console.log('键盘收起')
      })
    },
    initEmotion(){
      const list = this.emotionList;
      let emotionArr = [];
      list.map((item, index) => {
        emotionArr.push({
          name: '#${item};',
          url: `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" alt="" border="0">`
          
        });
      });
      this.emotionArr = emotionArr;
    },
    getUrl(value) {
        // console.log('图片地址是:'+openFileUrl(value))
        return openFileUrl(value)
      },
       //获取当前账户信息
    getCurrentAccount() {
      var params = {
        userName: this.user.userName,
      };
      findCurrentAccount(params).then((res) => {
        this.userInfo = res.data.data;
        if (this.userInfo.account.rolePermission){
          for (var i = 0; i < this.userInfo.account.rolePermission.length; i++) {
            if (this.userInfo.account.rolePermission[i]=='管理员用户'){
              this.isHadmin=true;
            }
            if (this.userInfo.account.rolePermission[i]=='栏目管理员用户'){
              this.isModelHadmin=true;
            }
          }
        }
      });
    },
    //获取话题信息
    getAllForumList() {
      this.forumList = {};
      this.commentList = [];
      var params = {
        userName: this.user.userName,
        id: this.itemId,
      };
      findById(params).then((res) => {
        this.forumList = res.data.data;
        this.showUserData=this.forumList.account
        this.isForbidden = this.forumList.account.isForbidden
        this.updateDisplayOrder(res.data.data.displayOrder);
      });
    },
    //获取话题下评论信息
    getContentCommentList() {
      var params = {
        userName: this.user.userName,
        id: this.itemId,
      };
      findContentComment(params).then((res) => {
        this.commentList = res.data.data.content;
      });
    },
    //阅读量加一
    updateDisplayOrder(displayOrder) {
      var params = {
        userName: this.user.userName,
        id: this.itemId,
        displayOrder: displayOrder+1,
      };
      displayOrderUpdate(params).then((res) => {
        // this.forumList = res.data.data;
      });
    },
    //获取评论类型信息
    getCommentTypeInfo() {
      var params = {
        userName: this.user.userName,
        dictType: "COMMENT_TYPE",
      };
      queryByType(params).then((res) => {
        var commentTypeInfo = res.data.data;
        for (var i = 0; i < commentTypeInfo.length; i++) {
          if (commentTypeInfo[i].value == "评论") {
            this.commentTypeInfo1 = commentTypeInfo[i];
          } else if (commentTypeInfo[i].value == "回复") {
            this.commentTypeInfo2 = commentTypeInfo[i];
          }
        }
      });
    },
    //获取点赞类型信息
    getSupportTypeInfo() {
      var params = {
        userName: this.user.userName,
        dictType: "SUPPORT_TYPE",
      };
      queryByType(params).then((res) => {
        var supportTypeInfo = res.data.data;
        for (var i = 0; i < supportTypeInfo.length; i++) {
          if (supportTypeInfo[i].value == "content") {
            this.supportTypeInfo1 = supportTypeInfo[i];
          } else if (supportTypeInfo[i].value == "comment") {
            this.supportTypeInfo2 = supportTypeInfo[i];
          }
        }
      });
    },
    //创建或删除点赞
    giveLike(item) {
      if (item.isSupport) {
        this.removeContentSupport(item, 0);
      } else {
        if (item.isOppose) {
          Notify({ type: "warning", message: "点踩后不可点赞！" });
        } else {
          this.createContentSupport(item, 0);
        }
      }
    },
    //创建或删除点踩
    stepOn(item) {
      if (item.isOppose) {
        this.removeContentSupport(item, 1);
      } else {
        if (item.isSupport) {
          Notify({ type: "warning", message: "点赞后不可点踩！" });
        } else {
          this.createContentSupport(item, 1);
        }
      }
    },
    //创建或删除评论的点赞
    giveCommentLike(item) {
      if (item.isSupport) {
        this.removeCommentSupport(item, 0);
      } else {
        this.createCommentSupport(item, 0);
      }
    },
    //创建点赞或点踩
    createContentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        typeId: this.supportTypeInfo1.id, //点赞类型id
        typeName: this.supportTypeInfo1.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      supportCreate(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "点赞成功！";
            item.isSupport = true;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) + 1;
          } else {
            title = "点踩成功！";
            item.isOppose = true;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) + 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //删除点赞或点踩
    removeContentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        // typeId: this.supportTypeInfo1.id, //点赞类型id
        // typeName: this.supportTypeInfo1.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      deleteSupport(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "取消点赞成功！";
            item.isSupport = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          } else {
            title = "取消点踩成功！";
            item.isOppose = false;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) - 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //创建评论点赞
    createCommentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        typeId: this.supportTypeInfo2.id, //点赞类型id
        typeName: this.supportTypeInfo2.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      supportCreate(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "点赞成功！";
            item.isSupport = true;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) + 1;
          } else {
            title = "点踩成功！";
            item.isOppose = true;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) + 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //删除评论点赞
    removeCommentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        // typeId: this.supportTypeInfo2.id, //点赞类型id
        // typeName: this.supportTypeInfo2.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      deleteSupport(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "取消点赞成功！";
            item.isSupport = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          } else {
            title = "取消点踩成功！";
            item.isOppose = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //处理转义字符
    htmlDecode(str) {
      var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
      str=str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
        return arrEntities[t];
      });
      const srcs= /(?<=<img.*?src=['"])(.*?)(?=['"].*?>)/g;
      return str.replace(srcs,(match)=>{
        if (match.includes('res.wx.qq')){
          return match
        }else{
          return openFileUrl(match)
        }
      })
      // const matches = [];
      // let match;
      // while (match = srcs.exec(str)) {
      //   matches.push(match[0]);
      // }
      // for (let i = 0; i < matches.length; i++) {
      //   str=str.replace(matches[i], openFileUrl(matches[i]));
      // }
      // return str;
    },
    handEmotion(item) {
      this.chatinfos = document.getElementById('chatinfosid').innerHTML+item.url;
      let ele = document.querySelector("#chatinfosid");
      // 移动光标并聚焦
      ele.selectionStart = ele.selectionStart + 2;
    },
    handEmotion2(item) {
      this.chat1infos = document.getElementById('chat1infosid').innerHTML+item.url;
      let ele = document.querySelector("#chat1infosid");
      // 移动光标并聚焦
      ele.selectionStart = ele.selectionStart + 2;
    },
    handEmotion3(item) {
      this.chat2infos = document.getElementById('chat2infosid').innerHTML+item.url;
      let ele = document.querySelector("#chat2infosid");
      // 移动光标并聚焦
      ele.selectionStart = ele.selectionStart + 2;
    },
    showEmojiView(index){
      //隐藏键盘
      // this.chatinfos=''
      document.activeElement.blur();
      if(index=='1'){
        this.showEmojiView1=true;
      }else if(index=='2'){
        this.showEmojiView2=true;
      }else if(index=='3'){
        this.showEmojiView3=true;  
      } 
    },
    showChatPopView(){
      this.issubmitClose=false
      this.showEmojiView1=false;
      this.showChatPop=true;
      this.anonymous=false
      this.show1ChatPop=false;
      this.chat1infos=''
      this.show2ChatPop=false;
      this.chat2infos=''
      if (localStorage.getItem(this.itemId)){
        console.log('AAAAAAAAAAAAAAAAAAAA')
        this.editInfos1=localStorage.getItem(this.itemId)
        this.chatinfos=this.editInfos1
      }else{
        console.log('BBBBBBBBBBBBBBBBBBB')
        this.chatinfos=''
        let ele = document.getElementById("chatinfosid");
        ele.innerHTML='';
      }
      console.log('当前的内容是'+this.chatinfos)
      // this.$nextTick(()=>{
      //   this.$refs.showChatPopRef.focus();
      // })
    },
    
    show1ChatPopView(index){
      this.issubmitClose=false
      this.showEmojiView2=false;
      this.show1ChatPop=true;
      this.anonymous=false
      this.showChatPop=false;
      this.chatinfos=''
      this.show2ChatPop=false;
      this.chat2infos=''
      this.commentIndexNumber1=index
      this.chat1hint='回复'+this.commentList[this.commentIndexNumber1].nickname+':'
      if(localStorage.getItem(this.commentList[this.commentIndexNumber1].id)){
        this.editInfos2=localStorage.getItem(this.commentList[this.commentIndexNumber1].id)
        this.chat1infos=this.editInfos2
      }else{
        this.chat1infos=''
        let ele = document.getElementById("chat1infosid");
        ele.innerHTML='';
      }
      this.$nextTick(()=>{
        this.$refs.showChat1PopRef.focus();
      })
    },
    show2ChatPopView(index1,index2){
      this.issubmitClose=false
      this.showEmojiView3=false;
      this.show2ChatPop=true;
      this.anonymous=false
      this.showChatPop=false;
      this.chatinfos=''
      this.show1ChatPop=false;
      this.chat1infos=''
      this.commentIndexNumber2=index1
      this.childIndexNumber=index2
      this.chat2hint='回复'+this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].nickname+':'
      if(localStorage.getItem(this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].id)){
        this.editInfos3=localStorage.getItem(this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].id)
        this.chat2infos=this.editInfos3
      }else{
        this.chat2infos=''
        let ele = document.getElementById("chat2infosid");
        ele.innerHTML='';
      }
      this.$nextTick(()=>{
        this.$refs.showChat2PopRef.focus();
      })
    },
      // @click="tosubmint(anonymous,chatinfos,forumList.id,this.commentTypeInfo1,'评论')
    tosubmint(anonymous,content,parentId,typeId,typeName){
      this.issubmitClose=true;
      var params = {
        userName: this.user.userName,
        appDecision: {
          anonymous:!anonymous,
          content:this.$refs.showChatPopRef.innerHTML,
          parentId:parentId,
          typeId:typeId,
          typeName:typeName
        },
      };
      create(params).then((res) => {
        Notify({type:'success', message:'评论成功'})
        this.showChatPop=false;
        this.chatinfos=''
        this.anonymous=false
        // this.clearEdit('1');
        this.getContentCommentList();
        this.getAllForumList();
      });
    },
    //  @click="tosubmint2(anonymous,chat2infos,childItem.id,childItem.rootId,childItem.creator,this.commentTypeInfo2,'回复')
    tosubmint2(anonymous,content,typeId){
      this.issubmitClose=true;
      console.log('当前选择AAA'+this.commentIndexNumber1)
      var params = {
        userName: this.user.userName,
        appDecision: {
          anonymous:!anonymous,
          content:this.$refs.showChat1PopRef.innerHTML,
          parentId:this.commentList[this.commentIndexNumber1].id,
          rootId:this.commentList[this.commentIndexNumber1].id,
          toName:this.commentList[this.commentIndexNumber1].creator,
          typeId:typeId,
          typeName:'回复'
        },
      };
      create(params).then((res) => {
        Notify({type:'success', message:'回复成功'})
        this.show2ChatPop=false;
        this.chat2infos=''
        this.show1ChatPop=false;
        this.chat1infos=''
        this.anonymous=false
        // this.clearEdit('2');
        this.getContentCommentList();
        this.getAllForumList();
      });
    },
    tosubmint3(anonymous,content,typeId){ //children
      this.issubmitClose=true;
      console.log('当前选择BBB'+this.commentIndexNumber2+'---'+this.childIndexNumber)
      var params = {
        userName: this.user.userName,
        appDecision: {
          anonymous:!anonymous,
          content:this.$refs.showChat2PopRef.innerHTML,
          parentId:this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].id,
          rootId:this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].rootId,
          toName:this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].creator,
          typeId:typeId,
          typeName:'回复'
        },
      };
      create(params).then((res) => {
        Notify({type:'success', message:'回复成功'})
        this.show2ChatPop=false;
        this.chat2infos=''
        this.show1ChatPop=false;
        this.chat1infos=''
        this.anonymous=false
        // this.clearEdit('3');
        this.getContentCommentList();
        this.getAllForumList();
      });
    },
    showalllist(index){
      console.log('所展开的回复是'+index)
      var params = {
        userName: this.user.userName,
        contentId: this.forumList.id,
        rootId: this.commentList[index].id,
      }; 
      Toast.loading({
        message: '加载中',
        forbidClick:true
      });
      findComment2(params).then((res) => {
        Toast.clear()
          if(!res.data){
            Notify(res.message)
            return
          }
          if(!res.data.data&&res.data.errcode==500){
            Notify(res.message)
            return
          }
          this.commentList[index].children={};
          this.commentList[index].children=res.data.data.content
      }); 
    },
    showUserInfosFun(){
      this.showUserInfos=true
    },
    interestdelete(item){
          Dialog.confirm({
            title: '提示',
            message: '您确认取消关注吗？',
          })
          .then(() => {
            Toast.loading({
              message: '取消中',
              forbidClick:true
            });
            interestdelete(Object.assign({userName:this.user.userName},{toName:item.oaAccount}))
              .then((res)=>{
                Toast.clear()
                if(!res.data){
                  Notify(res.message)
                  return
                }
                if(!res.data.data&&res.data.errcode==500){
                  Notify(res.message)
                  return
                }
                Notify({type:'success',message:'取消关注成功'})
                this.showUserData=[]
                this.showUserInfos=false
                this.getAllForumList()
              })
          })
          .catch(() => {
          });
        },
        toInterested(item){
          Toast.loading({
              message: '关注中',
              forbidClick:true
          });
          interestcreate(Object.assign({userName:this.user.userName},{fromName:this.userInfo.oaAccount},{toName:item.oaAccount}))
            .then((res)=>{
              Toast.clear()
              if(!res.data){
                Notify(res.message)
                return
              }
              if(!res.data.data&&res.data.errcode==500){
                Notify(res.message)
                return
              }
              Notify({type:'success',message:'关注成功'})
              this.showUserData=[]
              this.showUserInfos=false
              this.getAllForumList()
            })
        },
        toMyWord(item){
          console.log('他的名字是'+item.oaAccount)
      //      isHadmin: false, //是否为管理员
      // isModelHadmin:false, //是否为栏目管理员
          this.$router.push({
            name:'myword',
            query:{
              title:'他的帖子',
              otherUser: '1',
              createUser: item.oaAccount,
              isHadmin: this.isHadmin,
            }
          })
        },
        toMyGuanzhu(item){
          console.log('他的名字是'+item.oaAccount)
          this.$router.push({
            name:'myguanzhu',
            query:{
              title:'他的关注',
              otherUser: '1',
              createUser: item.oaAccount
            }
          })
        },
        toMyFans(item){
          console.log('他的名字是'+item.oaAccount)
          this.$router.push({
            name:'myfans',
            query:{
              title:'他的粉丝',
              otherUser: '1',
              createUser: item.oaAccount
            }
          })
        },
        showPopView22(index){
          this.imgList=[]
          for(var i=0; i<this.forumList.fileList.length; i++){
            this.imgList.push(openFileUrl(this.forumList.fileList[i].anonymousFilePath))
          }
          ImagePreview({
            images:this.imgList,
            startPosition: index,
            closeable: true,
          });
          // ImagePreview([openFileUrl(urls)]);
        },
        closedpop1(value){
          if(this.issubmitClose==true){
            this.editInfos1='';
            localStorage.setItem(this.itemId,'')
          }else{
            this.editInfos1=this.$refs.showChatPopRef.innerHTML;
            localStorage.setItem(this.itemId,this.editInfos1)
          }
        },
        closedpop2(value){
          if(this.issubmitClose==true){
            this.editInfos2='';
            localStorage.setItem(this.commentList[this.commentIndexNumber1].id,'')
          }else{
            this.editInfos2=this.$refs.showChat1PopRef.innerHTML;
            localStorage.setItem(this.commentList[this.commentIndexNumber1].id,this.editInfos2)
          }
        },
        closedpop3(value){
          if(this.issubmitClose==true){
            this.editInfos3='';
            localStorage.setItem(this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].id,'')
          }else{
            this.editInfos3=this.$refs.showChat2PopRef.innerHTML;
            localStorage.setItem(this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].id,this.editInfos3)
          }
        },
        tobidden(oaAccount){
          this.$router.push({
              name: "bidden",
              query: { 
                title:'禁言时长',
                oaAccount:oaAccount,
              },
          });
        }
        // clearEdit(type){
        //   console.log('清理清理'+type)
        //   if(type=='1'){
        //     this.editInfos1='';
        //     localStorage.setItem(this.itemId,'')
        //   }else if(type=='2'){
        //     this.editInfos2='';
        //     localStorage.setItem(this.commentList[this.commentIndexNumber1].id,'')
        //   }else if(type=='3'){
        //     this.editInfos3='';
        //     localStorage.setItem(this.commentList[this.commentIndexNumber2].children[this.childIndexNumber].id,'')
        //   }
          
        // }
  },
};
</script>
<style>
.content2 {
  width: 100%;
  height: 100%;
  font-size: 14px;
  overflow-y: auto;
}
.row {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.25rem 0.25rem 0.25rem;
}
.lCol {
  width: 1.4rem;
}
.rCol {
  widows: calc(100% - 1.4rem);
  color: #aaaaaa;
}

.rCol2 {
  widows: calc(100% - 1rem);
  color: #aaaaaa;
}
.infoBox {
  padding: 0 0.35rem;
  padding-bottom: 36px;
}
.infoBox .infoTitle {
  line-height: 0.55rem;
  font-weight: normal !important;
  font-size: 14px !important;
  font-family: none !important;
}
.infoBox .infoTitle strong,
.infoBox .infoTitle h1,
.infoBox .infoTitle h2, 
.infoBox .infoTitle h3, 
.infoBox .infoTitle h4, 
.infoBox .infoTitle h5, 
.infoBox .infoTitle h6,
.infoBox .infoTitle b,
.infoBox .infoTitle p,
.infoBox .infoTitle div,
.infoBox .infoTitle span{
  font-weight: normal !important;
  font-size: 14px !important;
  font-family: none !important;
  line-height: normal !important;
}

.huifu  strong,
.huifu  h1,
.huifu  h2, 
.huifu  h3, 
.huifu  h4, 
.huifu  h5, 
.huifu  h6,
.huifu  b,
.huifu  p,
.huifu  div,
.huifu  span{
  font-weight: normal !important;
  font-size: 14px !important;
  font-family: none !important;
  line-height: normal !important;
}
.iconRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #aaaaaa;
  margin-top: 0.1rem;
}
.iconRow .iconCol {
  display: flex;
  align-items: center;
}
.moreBtn {
  margin: 0.25rem 0;
}
.commentList {
  margin-top: 20px;
  margin-bottom: 39px;
}
.commentRow {
  display: flex;
  align-items: center;
  color: #aaaaaa;
  justify-content: space-between;
  line-height: 0.55rem;
}
.commentRow .lText {
  /* display: inline-flex;
  align-items: start; */
  word-break: break-all;
}
.commentRow .rIcon {
  display: flex;
  align-items: center;
  text-align: left;
}
/* .commentContent {
  word-break: break-all;
  display: inline-flex;
  align-items: center;
} */
.ml2 {
  margin-left: 0.2rem;
}
.mt2 {
  margin-top: 0.12rem;
}
.colorOrange {
  color: #f76e20;
}
.normalColor{
  color: #1C1C1C;
}
.titleColor{
  color: #000000;
}
.box2{
  background-color:#fff;
  border-radius:10px;
  border:1px solid #E9E9E9;
  margin:15px;
  padding:0px 20px;
  height:60px
}
.centerlines{
  width:1px;height:20px;background: #CFCFCF;margin:8px
}
.emotion{
  height: 200px;
  width: 100vh;
}
.divinputview{
  flex:1;
  resize: none;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 10px;
  background-color: #fff;
  -webkit-app-region: no-drag;
  word-wrap: break-word;
  word-break:break-all;
  max-height: 3rem;
  overflow:auto;
  border-radius: 10px;
  border: 1px solid #E9E9E9;
}
.chatinfoview{
  border-radius: 10px;
  background-color: #F8F8F8;
  /* background-color: yellow; */
  padding: 10px;
  margin-left:1rem;
}
/* 这段代码匹配 属性 contenteditable="true" 的元素类容为empty时添加:before伪元素 
attr(placeholder)获取属性placeholder的值赋值给content这样就可以模拟的实现文本框中 placeholder 属性, */
*[contenteditable="true"]:empty:before{
        content:attr(placeholder);
        color: #A9A9A9;
    }
</style>